<script setup>
    import { ElMessage } from 'element-plus'
    import { xzLogin } from '@/api/home'
    import { useStore } from 'vuex'

    const store = useStore()

    let form = $ref({
        captcha: 'pc'
    })

    let btnLoading = $ref(false)

    // 登录
    const handleClick = () => {

        if(!form.username){
            ElMessage.warning('请输入账号')
            return
        }else if(!form.password){
            ElMessage.warning('请输入密码')
            return
        }

        btnLoading = true
        xzLogin(form).then(res => {
            btnLoading = false
            if(res.success){
                ElMessage.success('登录成功')
                localStorage.xz_token = res.result.token
                store.state.XZTOKEN = res.result.token
            }
        })
    }

</script>

<template>
    <div class="login-wrap flex-center"> 
        <div class="login-box">
            <div class="title flex-center">
                <img src="../../assets/images/login-title-bg-1.png">
                <span>用户登录</span>
                <img src="../../assets/images/login-title-bg-2.png">
            </div>
            
            <div class="login-input">
                <div class="input-item flex-center">
                    <img src="../../assets/images/login-username.png">
                    <input v-model="form.username" placeholder="请输入账号">
                </div>
                <div class="input-item flex-center">
                    <img src="../../assets/images/login-password.png">
                    <input v-model="form.password" type="password" placeholder="请输入密码">
                </div>
            </div>

            <div class="login-btn" @click="handleClick" v-loading="btnLoading">登录</div>

        </div>
    </div>
</template>

<style lang="less" scoped>
    .login-wrap{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        background: rgba(0, 0, 0, 0.6);

        .login-box{
            width: 762px;
            height: 599px;
            background: url('../../assets/images/login-bg.png') center no-repeat;
            padding: 106px 133px;

            .title{
                color: #25F3F3;
                font-size: 24px;
                padding-bottom: 20px;
                span{
                    margin: 0 20px;
                }
            }

            .login-input{
                .input-item{
                    margin: 57px 8px 0 8px;
                    height: 66px;
                    background: url('../../assets/images/login-input-bg.png') center no-repeat;
                    padding: 0 30px;

                    img{
                        width: 38px;
                        height: 36px;
                    }

                    input{
                        width: calc(100% - 30px);
                        height: 56px;
                        background: transparent;
                        font-size: 24px;
                        padding: 8px 15px 0;
                        color: #fff;
                    }

                    input::-webkit-input-placeholder{
                        color: #1A6BA3;
                    }
                }
            }

            .login-btn{
                height: 73px;
                line-height: 73px;
                text-align: center;
                color: #fff;
                background: url('../../assets/images/login-btn-bg.png') center no-repeat;
                margin-top: 34px;
                font-size: 24px;
                cursor: pointer;
            }
        }
    }
</style>